/**
 * @create 2022-06-07
 * @desc filter-block
 */

import { FC, useState } from 'react';
import cs from 'classnames';
import { Button, Space } from 'antd';
import { IconComp, IconKeys } from '@src/components';
import { FilterBlockProps } from './interface';
import { CollapseForm } from './form';

export const FilterBlock: FC<FilterBlockProps> = ({
  children,
  collapse: collapseProp = true,
  form: formRef,
  onFinish,
  RightBtn,
  showBtn = true,
  showMore = false,
  ...formProps
}) => {
  const [collapse, setCollapse] = useState(collapseProp);

  return (
    <CollapseForm form={formRef} onFinish={onFinish} {...formProps} collapse={collapse}>
      {children}
      <div className={cs('flex justify-between', { hidden: !showBtn })}>
        <Space className="flex-none" size="middle">
          <Button htmlType="submit" type="primary">
            Search
          </Button>
          <Button htmlType="reset">Reset</Button>
          <span
            className={cs('cursor-pointer inline-flex items-center', { hidden: !showMore })}
            onClick={() => setCollapse((v) => !v)}
          >
            {collapse ? 'More' : 'Hide'}
            <IconComp
              className={cs('ml-4 mt-4', { 'rotate-180': !collapse })}
              iconKey={IconKeys.downOutlined}
            />
          </span>
        </Space>
        <div className="flex-none">{RightBtn}</div>
      </div>
    </CollapseForm>
  );
};
